<template>
    <el-container class="creator-container">
      <!-- 侧边导航 -->
      <el-aside width="240px" class="sidebar">
        <el-menu
          default-active="1"
          class="menu-wrapper"
          @select="handleSelect">
        <el-button type="primary" plain>发布作品</el-button>
          <!-- 创作中心 -->

          <el-submenu index="1">

            <template #title>
              <i class="el-icon-edit"></i>
              <span>创作中心</span>
            </template>
            <el-menu-item index="1-1">首页</el-menu-item>
            <el-menu-item index="1-2">内容管理</el-menu-item>
            <el-menu-item index="1-3">数据中心</el-menu-item>
          </el-submenu>
  
          <!-- 创作服务平台 -->
          <el-submenu index="2">
            <template #title>
              <i class="el-icon-notebook-2"></i>
              <span>创作服务</span>
            </template>
            <el-menu-item index="2-1">发布笔记</el-menu-item>
            <el-menu-item index="2-2">素材推荐</el-menu-item>
            <el-menu-item index="2-3">平台公告</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
  
      <!-- 主内容区 -->
      <el-main class="main-content">
        <!-- 顶部功能区 -->
        <el-row :gutter="20" class="top-section">
          <el-col :span="8">
            <el-card>
              <template #header>
                <span class="card-title">热门活动</span>
              </template>
              <div class="activity-item">
                <div>2025上海丰康大文奖</div>
                <div class="participants">19.8万人参与</div>
              </div>
            </el-card>
          </el-col>
          
          <el-col :span="8">
            <el-card>
              <template #header>
                <span class="card-title">打卡挑战</span>
              </template>
              <div class="challenge-text">
                每周瓜分创作金，额外奖励>>
              </div>
            </el-card>
          </el-col>
        </el-row>
  
        <!-- 数据展示区 -->
        <el-row :gutter="20">
          <el-col :span="16">
            <el-card class="hot-news">
              <template #header>
                <span class="card-title">全网热点</span>
              </template>
              <el-checkbox-group>
                <div v-for="(item, index) in hotNews" :key="index">
                  <el-checkbox :label="item"></el-checkbox>
                </div>
              </el-checkbox-group>
            </el-card>
          </el-col>
        </el-row>
  
        <!-- 功能推荐 -->
        <el-row :gutter="20" class="function-section">
          <el-col :span="8" v-for="(item, index) in functions" :key="index">
            <el-card>
              <div class="function-item">
                <h3>{{ item.title }}</h3>
                <div class="function-desc">{{ item.desc }}</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </template>
  
  <script>
  export default {
    data() {
      return {
        hotNews: [
          '山东新桥男子牌驾校6次2位，已签到制',
          '中欧将同步全面取消对相互交往限制',
          '重庆地铁城于江陵发生刑事事故？假的'
        ],
        functions: [
          { title: '账号管理', desc: '支持最多1000个账号，完全免费' },
          { title: '原创复制', desc: '支持文章原创性定制' },
          { title: '热门素材', desc: '支持素材下载与播放' }
        ]
      }
    },
    methods: {
      handleSelect(key) {
        console.log('Menu selected:', key)
      }
    }
  }
  </script>
  
  <style scoped>
  .creator-container {
    height: 100vh;
    background: #e5f9f5;
  }
  
  .sidebar {
    background: #fff;
    border-right: 1px solid #e6ebf5;
  }
  
  .card-title {
    font-weight: 600;
    color: #303133;
  }
  
  .activity-item {
    line-height: 1.8;
    font-size: 14px;
  }
  
  .participants {
    color: #909399;
    font-size: 12px;
  }
  
  .hot-news {
    margin-top: 20px;
  }
  
  .function-section {
    margin-top: 20px;
  }
  
  .function-item h3 {
    color: #409EFF;
    margin-bottom: 8px;
  }
  
  .function-desc {
    color: #606266;
    font-size: 13px;
  }
  </style>